/*
全局的变量：
*/
let nowpage = 1, pagesize = 3; // 分页
// let tableData = []; // 存储一页的数据，在删除的时候，判断条数，在决定是否要nowpage--。
let switchState = false; // 开关，决定是否是呀搜索的逻辑。 false：不使用。true：使用。
let sourceDataArr = [] // 所有团队的数据
let total = 0; // 总页数
let renderTableArr = [] // 当前要渲染的表格的数据,在删除的时候，判断条数，在决定是否要nowpage--

let tphoto = undefined;// 添加团队中的而头像
let doctorsArr = [] //所有医生基本信息
let justAddDoctorArr = [] //已经添加的医生信息的数组

// 页面加载完毕，就应该请求一页数据回来渲染
window.onload = function () {
  getPageTeamHandler()
};

// 获取默认团队的数据
const getPageTeamHandler = function () {
  nowpage = 1;
  let searchTeam = $("#searchTeam").val().trim();
  let searchDoctorManage = $("#searchDoctorManage").val().trim();

  $.ajax({
    url: '/getPageTeam',
    type: 'get',
    data: { 'tname': searchTeam, 'dname': searchDoctorManage },
    success(res) {
      // console.log(res.data); // 8条，但是不能直接渲染的数据
      if (res.code === 200) {
        // 如何处理数据： 
        // 1. 拿到唯一的团队的ID；
        let allTid = [];
        res.data.forEach(el => {
          // fid(cb): 如果没有找到相同的值，就返回undefined.
          if (allTid.find(item => item === el.tid) === undefined) {
            allTid.push(el.tid)
          }
        });
        // console.log(allTid);// [4,5,8,9]
        // 2. 把每一个团队下的医生，合并到一起。
        let renderArr = [];
        allTid.forEach(el => {
          let obj = { doctors: [] };
          res.data.forEach(item => {
            if (item.tid === el) {
              obj.tid = item.tid;
              obj.tname = item.tname;
              obj.tdes = item.tdes;
              obj.tphoto = item.tphoto;
              obj.doctors.push({
                "did": item.did,
                "manager": item.manager,
                "dname": item.dname,
                "dsex": item.dsex,
                "dsid": item.dsid,
                "dtel": item.dtel,
                "dfeaturs": item.dfeaturs,
                "jid": item.jid,
                "dphoto": item.dphoto
              })
            }
          });
          // 把合并好的对象，添加到renderArr
          renderArr.push(obj)
        });

        console.log(renderArr);
        sourceDataArr = renderArr; // 赋值给总存储的数组
        // 在提取分页的数据
        let startIndex = (nowpage - 1) * pagesize;
        renderTableArr = sourceDataArr.slice(startIndex, nowpage * pagesize)
        renderTable(renderTableArr, $('#teamTbody'));

        // 渲染分页, 做前端分页！
        total = Math.ceil(sourceDataArr.length / pagesize)
        renderPagination(total, $("#mypage"))
      } else {
        alert(res.msg)
      }
    }
  })
};

// 渲染表格
// arr, 渲染表格的数组
// nodeDom ， jq对象
const renderTable = function (arr, nodeDom) {
  nodeDom.html('')
  let htmlStr = ''
  arr.forEach(el => {
    htmlStr += `<tr>
    <td>
      <input type="checkbox">
    </td>
    <td>${el.tname}</td>
    <td>${getTeamManager(el.tid, arr)}</td>
    <td>
     ${getTeamDoctorName(el.tid, arr)}
    </td>
    <td>
    <button data-id="${el.tid}" type="button" class="btn btn-link text-info btn-look">查看</button>
      <button data-id="${el.tid}" type="button" class="btn btn-link text-info btn-edit">修改</button>
      <button data-id="${el.tid}" type="button" class="btn btn-link text-danger btn-delete">删除</button>
    </td>
  </tr>`;
  });
  nodeDom.html(htmlStr)
};

// 获取团队的负责医生的名字
const getTeamManager = (tid, arr) => {
  let dname = [];
  arr.forEach(el => {
    if (el.tid === tid) {
      let obj = el.doctors.find(item => item.manager === '1')
      // console.log(obj);
      if (obj !== undefined) {
        dname.push(obj.dname)
      }
    }
  });
  return dname;
}
// 获取团队所有医生的名字
const getTeamDoctorName = (tid, arr) => {
  let dname = []
  arr.forEach(el => {
    if (el.tid === tid) {
      el.doctors.forEach(item => {
        dname.push(item.dname)
      })
    }
  });
  return dname;
}

// 渲染分页的函数
// total, 总页数
// nodeDom ， jq对象
const renderPagination = (total, nodeDom) => {
  nodeDom.html('')
  let htmlStr = ''
  for (let i = 1; i <= total; i++) {
    htmlStr += `<li class="page-item ${i === nowpage ? 'active' : ''}"><a class="page-link" href="#">${i}</a></li>`;
  };
  nodeDom.html(htmlStr);
};

// 给分页做事件委托
$(document).on('click', '.page-item', function () {
  nowpage = Number(this.innerText)
  console.log(nowpage);
  // 在提取分页的数据
  let startIndex = (nowpage - 1) * pagesize;
  renderTableArr = sourceDataArr.slice(startIndex, nowpage * pagesize)
  renderTable(renderTableArr, $('#teamTbody'));
  // 渲染分页, 做前端分页！
  total = Math.ceil(sourceDataArr.length / pagesize)
  renderPagination(total, $("#mypage"))
});

// 搜索按钮绑定事件
$('#serchBtn').on('click', function () {
  getPageTeamHandler();
})

// 添加团队绑定事件
$("#addTeamBtn").on('click', function () {
  $("#addTeamModal").modal('show')
  // 获取医生列表的数据
  $.ajax({
    url: "/getAllDoctors", type: 'get', success(res) {
      if (res.code === 200) {

        res.data.forEach(item => {
          item.manager = '2'
        })

        doctorsArr = res.data;
        // console.log(res.data);

        // 动态渲染添加医生里面的下拉列表

        // $("#teamItems").html('')
        // let htmlStr = '<option value="" disabled selected> 请选择医生</option>';
        // doctorsArr.forEach(el => {
        //   htmlStr += `<option value="${el.did}">${el.dname}</option>`;
        // });
        // $("#teamItems").html(htmlStr)

        renderAddTeamOfDoctor(doctorsArr) //动态渲染添加医生里面的下拉列表
      }
    }

  })
});

// 添加团队---文件上传--绑定一个事件
$("#customFile").change(function (event) {
  // console.log(this.files[0]);
  tphoto = this.files[0]
  // 如果没有文件，就把头像隐藏，如有就预览显示图片。
  if (tphoto === undefined) {
    $(".user-head-photo").hide()
  } else {
    $(".user-head-photo").show()
    let filerender = new FileReader();
    filerender.onload = function () {
      $(".user-head-photo").attr('src', filerender.result);
    }

    filerender.readAsDataURL(tphoto)
  }
});

// 给添加团队模态框里面的添加医生按钮绑定事件
$("#addDoctorToTeamBtn").on('click', function () {
  let did = Number($("#teamItems").val());
  console.log(did); // null \\ 11
  if (!did) {
    alert('请选择一个医生')
    return; // 没有选择医生
  }

  // 从doctorsArr数组中，拿出对应医生的数据
  // let obj = doctorsArr.find(item => item.did === did);
  let obj;
  doctorsArr.forEach((el, i, arr) => {
    if (el.did === did) {
      obj = arr.splice(i, 1)[0]  //[{did,...}] splice（）删除后，返回被删除的对象形成的新数组，所以才使用[0] ，获取删除的对象。
    }
  })
  // 重新渲染医生下拉列表
  renderAddTeamOfDoctor(doctorsArr)
  // console.log(obj);
  justAddDoctorArr.push(obj); //被删除的对象，添加到下面表格对应的数组中。

  // 动态渲染添加的医生信息的表格
  readerAddTeamOfTable(justAddDoctorArr)
  /* let addTeamTbody = $("#addTeamTbody");
  addTeamTbody.html('');
  let htmlStr = '';
  justAddDoctorArr.forEach(el => {
    htmlStr += `<tr>
    <td>${el.dname}</td>
    <td>
      <div class="custom-control custom-switch">
        <input data-id="${el.did}" type="checkbox" class="custom-control-input" id="customSwitch${el.did}" ${el.manager === '1' ? 'checked' : ''}>
        <label class="custom-control-label" for="customSwitch${el.did}">${el.manager === '1' ? '是' : '否'}</label>
      </div>
    </td>
    <td>${el.dsex}</td>
    <td>${el.dsid}</td>
    <td>${el.dtel}</td>
    <td>${el.jname}</td>
    <td>
      <button  data-id="${el.did}" type="button" class="btn btn-link text-danger delete-btn">删除</button>
    </td>
  </tr>`;
  });

  addTeamTbody.html(htmlStr) */


});



// 动态渲染添加团队中的医生列表
const renderAddTeamOfDoctor = function (arr) {
  $("#teamItems").html('')
  let htmlStr = '<option value="" disabled selected> 请选择医生</option>';
  arr.forEach(el => {
    htmlStr += `<option value="${el.did}">${el.dname}</option>`;
  });
  $("#teamItems").html(htmlStr)
};

// 给添加团队中，已经添加的医生的表格的switch开关，做事件委托 custom-control-input
$(document).on('change', '.custom-control-input', function () {
  // console.log(this.checked)
  let state = this.checked;
  let did = Number(this.getAttribute('data-id'));

  justAddDoctorArr.forEach(el => {
    if (el.did === did) {
      if (state === true) {
        el.manager = '1' // 负责人
      } else {
        el.manager = '2'  // 不是负责人
      }
    }
  });
  console.log(justAddDoctorArr);

})
// 给添加团队中，已经添加的医生的表格的删除按钮，做事件委托 delete-btn
$(document).on('click', '.delete-btn', function () {
  let did = Number(this.getAttribute('data-id'));
  justAddDoctorArr.forEach((el, i, arr) => {
    if (el.did === did) {
      let obj = arr.splice(i, 1)[0];
      doctorsArr.push(obj)
    }
  });
  renderAddTeamOfDoctor(doctorsArr) // 重新渲染下拉列表
  readerAddTeamOfTable(justAddDoctorArr) // 重新渲染添加团队里面的表格

});

// 动态渲染添加团队里面的表格
const readerAddTeamOfTable = (arr) => {
  let addTeamTbody = $("#addTeamTbody");
  addTeamTbody.html('');
  let htmlStr = '';
  arr.forEach(el => {
    htmlStr += `<tr>
    <td>${el.dname}</td>
    <td>
      <div class="custom-control custom-switch">
        <input data-id="${el.did}" type="checkbox" class="custom-control-input" id="customSwitch${el.did}" ${el.manager === '1' ? 'checked' : ''}>
        <label class="custom-control-label" for="customSwitch${el.did}">${el.manager === '1' ? '是' : '否'}</label>
      </div>
    </td>
    <td>${el.dsex}</td>
    <td>${el.dsid}</td>
    <td>${el.dtel}</td>
    <td>${el.jname}</td>
    <td>
      <button  data-id="${el.did}" type="button" class="btn btn-link text-danger delete-btn">删除</button>
    </td>
  </tr>`;
  });

  addTeamTbody.html(htmlStr)
};

// 给模态框里面的创建团队按钮，绑定事件
$(".btn-add").on('click', function () {
  let tname = $("#teamname").val().trim();
  let tdes = $("#info").val().trim();
  // tphoto
  let teamDoctors = [];
  justAddDoctorArr.forEach(el => {
    teamDoctors.push({ did: el.did, manager: el.manager })
  });
  let formdata = new FormData();
  formdata.append('tname', tname)
  formdata.append('tdes', tdes)
  if (tphoto !== undefined) {
    formdata.append('tphoto', tphoto)
  }
  formdata.append('doctorArr', JSON.stringify(teamDoctors))

  // console.log(tname, tdes, tphoto, teamDoctors)

  $.ajax({
    url: '/addDoctorTeam',
    type: 'post',
    data: formdata,
    contentType: false,
    processData: false,
    success(res) {
      if (res.code === 200) {
        alert(res.msg)
        $("#addTeamModal").modal('hide')
      } else {
        alert(res.msg)
      }
    }
  })

});